package com.example.recipesapp.ui.screens

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SearchBar
import androidx.compose.material3.Text
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.unit.dp
import com.example.recipesapp.R
import com.example.recipesapp.ui.components.RecipeItem
import com.example.recipesapp.ui.theme.BackgroundColor
import com.example.recipesapp.ui.viewmodel.RecipeViewModel
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.SearchBar

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun RecipeListScreen(viewModel: RecipeViewModel) {
    var expanded by remember { mutableStateOf(false) }
    var query by remember { mutableStateOf("") }

    Column(modifier = Modifier.background(MaterialTheme.colorScheme.background)) {
        SearchBar(
            modifier = Modifier.fillMaxWidth(),
            colors = SearchBarDefaults.colors(
                containerColor = MaterialTheme.colorScheme.surfaceVariant
            ),
            inputField = {
                SearchBarDefaults.InputField(
                    colors = TextFieldDefaults.colors(
                        // 容器背景色（新版参数名）
                        focusedContainerColor = MaterialTheme.colorScheme.surface,
                        unfocusedContainerColor = MaterialTheme.colorScheme.surface,

                        // 指示器颜色（新版参数名）
                        focusedIndicatorColor = Color.Transparent,  // 聚焦状态指示器
                        unfocusedIndicatorColor = Color.Transparent,  // 非聚焦状态指示器

                        // 文本颜色（拆分为状态相关参数）
                        focusedTextColor = MaterialTheme.colorScheme.onSurface,
                        unfocusedTextColor = MaterialTheme.colorScheme.onSurface,

                        // 占位符颜色（拆分为状态相关参数）
                        focusedPlaceholderColor = MaterialTheme.colorScheme.onSurfaceVariant,
                        unfocusedPlaceholderColor = MaterialTheme.colorScheme.onSurfaceVariant
                    ),
                    query = query,
                    onQueryChange = { query = it },
                    onSearch = {
                        viewModel.updateSearchQuery(query)
                        viewModel.search()
                        expanded = false
                    },
                    expanded = expanded,
                    onExpandedChange = { newExpanded -> expanded = newExpanded },
                    placeholder = { Text("搜索食谱...") },
                    leadingIcon = { Icon(Icons.Default.Search, null) },
                    trailingIcon = {
                        if (query.isNotEmpty()) {
                            IconButton(onClick = { query = "" }) {
                                Icon(Icons.Default.Close, null)
                            }
                        }
                    },
                )
            },
            expanded = expanded,
            onExpandedChange = { newExpanded -> expanded = newExpanded }
        ) {
            if (query.isNotEmpty()) {
                viewModel.getSuggestions(query).forEach { suggestion ->
                    Text(
                        text = suggestion,
                        modifier = Modifier.padding(16.dp).fillMaxWidth()
                    )
                }
            }
        }

        LazyColumn {
            items(viewModel.searchResults.size) { index ->
                val recipe = viewModel.searchResults[index]
                RecipeItem(recipe) {
                    viewModel.selectedRecipe = recipe
                    viewModel.loadSteps(recipe.id)
                }
            }
        }

        viewModel.selectedRecipe?.let { recipe ->
            RecipeDetailDialog(
                recipe = recipe,
                steps = viewModel.steps,
                onDismiss = { viewModel.selectedRecipe = null }
            )
        }

    }
}